/**
 * Created by yuanlian on 2016/10/27.
 */
angular.module('ng-customindex', [])
    .directive('customIndex', [function () {
        return {
            restrict: 'EC',
            require: '?ngModel',
            scope: {
                selection: '=selection',
                content: '=content',
                limit: '=limit',
                width:'=width',
                default:'=default'
            },
            replace: true,
            link: function (scope, element, timeout) {

                scope.targetShow = false
                // scope.groups = _.groupBy(scope.content, 'category')
                scope.temp=_.clone(scope.selection)
                scope.openTarget = function () {
                    scope.targetShow = !scope.targetShow
                }
                scope.toggleSelection = function (item) {
                    var idx = scope.temp.indexOf(item.id);

                    if (idx > -1) {
                        if (scope.temp.length == 1) {
                            return
                        }
                        scope.temp.splice(idx, 1);
                    }
                    else {
                        scope.temp.push(item.id);
                        if (scope.temp.length > scope.limit) {

                            scope.temp.splice(0, 1);
                            return
                        }


                    }
                }
               scope.ok=function(){
                   scope.selection=_.clone(scope.temp)

                   scope.width={'width': (100/scope.selection.length-2)+'%'}
                   scope.targetShow = false
               }
               scope.restore=function(){
                   scope.selection=_.clone(scope.default)
                   scope.width={'width': (100/scope.selection.length-2)+'%'}
                   scope.targetShow = false
               }
                scope.blur = function () {
                    console.info('sdd')
                    scope.targetShow = false
                }


            },
            template: // '<div  style="outline: none"><div class="button-target" ng-click="openTarget()">' +
            ' <div class="target-group" ng-blur="blur()" tabindex=1 style="outline: none">' +
            '<div class="button-index" ng-click="openTarget()">' +
            '<i class="fa fa-signal"></i>&nbsp;自定义指标' +
            '</div>' +
            '<div class="index-open" ng-if="targetShow"> ' +
            '   <div class="target-tip"><span>提示：可同时选择</span><span style="color:red" ng-bind="limit"' +
            ' ></span><span>项</span> <span class="restore" ng-click="restore()" > 系统默认指标</span></div>' +
            ' <li class="index-li" ng-repeat="ii in content">' +
            '<div class="col-md-2">' +
            ' <span> {{ii.category}}</span>' +
            '</div>' +

            '<div class="col-md-10" style="margin-left:-8%">' +
            ' <div class="index-category ">' +
            '<ul class="col-md-3"  ng-repeat="item in ii.list" ng-click="toggleSelection(item)">' +
            ' <i class="fa fa-check-square-o" ng-if="temp.indexOf(item.id) > -1"></i>' +
            '   <i  class="fa fa-square-o" ng-if="temp.indexOf(item.id) <= -1"></i>{{::item.name}}' +
            '  </ul>' +
            '</div>' +
            '</div>' +

            '<div class=" col-md-12 target-hh"></div>' +

            '</li>' +

            '<div class="index-ok1" ng-click="ok()">确定</div>' +
            '</div>' +
            '</div>'
        };
    }]);
